<template>
  <div>


	<section class="featured-block text-center">
		<div class="container">
			

            <div>
                    <img :src="src" alt="">
					<br />

					<Button color="red" @click="del">删除</Button>
                    <Button color="red" @click="move">移动图片</Button>
					&emsp;&emsp;

					<input type="text" v-model="mkdir" /><Button color="blue" @click="create_mkdir">创建目录</Button>


            </div>

            <div>
                <table>


                    <tr>

                        <td>

                            又拍云

                        </td>

                        <td>

                            <!-- <input type="file" @change='upload_upyun'> -->
                            
                            <div id="upload" @change='upload_upyun'>拖拽上传</div>
                        </td>

                    </tr>

                </table>
            </div>



		</div>
	</section>
	

	

 
		
		

    
  </div>
  
</template>


 
<script>


//导入文件
import {config,formatXml} from '../config.js'

export default {
  data () {
    return {
      msg: "这是一个变量",

      //定义目录名称
      mkdir:'',

      //图片名
      filename:'',

      src:'',



    }
  },

  mounted:function(){
    
    //注册拖拽容器
    let upload = document.querySelector('#upload');
    //声明监听事件
    upload.addEventListener('dragenter', this.onDrag, false);
    upload.addEventListener('dragover', this.onDrag, false);
    upload.addEventListener('drop', this.onDrop, false);

  
},
  methods:{


      //移动图片
      move(){
            this.axios.get('http://localhost:8000/move/',{params:{filename:this.filename}})// 上传图片

            .then(res=> {
              if (res.data.code==200){
                  this.$Message('移动成功')
              }else{
                  this.$Message('移动失败')
              }

            });
      },


	  onDrag (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      onDrop (e) {
        e.stopPropagation();
        e.preventDefault();
        this.upload_upyun(e.dataTransfer.files);
      },

        //上传又拍云
        upload_upyun:function(files){


            //获取文件对象
            //let file = e.target.files[0];
            let file = files[0];

            //声明参数
            let param = new FormData();
            param.append('file',file);

            const config = {

            headers: { 'Content-Type': 'multipart/form-data' }

            } 

            this.axios.post('http://localhost:8000/uploadfileupyuns/', param, config)// 上传图片

            .then(res=> {
                //图片名
                let filename = JSON.parse(res.data.filename).filename
                // console.log(JSON.parse(response.data.filename).filename)
                this.filename = filename
                this.src = 'http://zl1907a.test.upcdn.net/'+filename

            });

        },

      //又拍云删除文件方法
      del(){
          this.axios.get('http://localhost:8000/dels/',{params:{'filename':this.filename}}).then(res=>{
              if (res.data.code==200){
                  this.$Message('删除成功')
                  this.src = '';
              }else{
                  this.$Message('删除失败')
              }
              

          })
      },
      

      //又拍云创建文件夹
      create_mkdir(){
          this.axios.get('http://localhost:8000/mkdirs/',{params:{'mkdir':this.mkdir}}).then(res=>{
              if (res.data.code==200){
                  this.$Message('创建成功')
                  
              }else{
                  this.$Message('创建失败')
              }
              

          })
      },

      
    

}

}
</script>
 
<style>

td {
    padding: 10px;
}


#upload {
  margin: 100px auto;
  width: 300px;
  height: 150px;
  border: 2px dashed #f00;
}

</style>